<template>
  <el-row>
    <el-col :span="1">
      <el-checkbox v-model="config.checked" style="margin:12px 0 0 6px"></el-checkbox>
    </el-col>
    <el-col :span="config.span-1">
      <el-form-item
        class="edit-form-item"
        :label-width="labelWidth"
        :required="config.required"
      >
        <template #label style="display: inline-block">
          <div style="display: inline-flex;">
            <span class="seqNo" v-if="currentItem.index">{{ currentItem.index +'.'}}</span>
            <form-tinymce style="flex:1" v-if="config.showLabel" :inline="true" v-model="config.label" @input="handleChangeLabel" />
            <span  v-if="currentItem.examConfig&&currentItem.examConfig.score&&currentItem.examConfig.enableScore" class="text-after">
              (最高分值:{{ currentItem.examConfig.score }} 分)
              <span v-if="currentItem.examConfig.answer" style="color: #13ce66;margin-left: 20px">
                正确答案：{{ getExamAnswer }}
              </span>
            </span>
          </div>
          
        </template>
        <!--     特殊处理组件 会对值进行包装等操作-->
        <template v-if="componentList.includes(currentItem.typeId)">
          <component
            :is="currentItem.config.tag"
            v-model="currentItem.config.defaultValue"
            class="form-item-component"
            :item="currentItem"
            :mode="'design'"
            @input="handleDefaultValue"
          />
        </template>

        <template v-else>
          <!--    其他无特殊处理组件-->
          <component
            :is="currentItem.config.tag"
            v-model="currentItem.config.defaultValue"
            class="form-item-component"
            v-bind="{ ...currentItem }"
            :mode="'design'"
            @input="handleDefaultValue"
          />
        </template>
      </el-form-item>
    </el-col>
  
</el-row>
</template>

<script>
import "../../components/FormItem/autoRegister.js"
import draggable from "vuedraggable"
import FormTinymce from "../tinymce"
import {getCheckedLabel} from "../GenerateForm/FormItemLabel"

export default {
  name: "FormItem",
  components: {
    FormTinymce,
    draggable
  },
  props: {
    currentItem: {
      type: Object,
      default: () => {
      }
    },
    index: {
      type: Number,
      default: () => {
      }
    },
  },
  data() {
    return {
      // 这些组件值需要被包装 需要特殊处理
      componentList: [
        "RADIO",
        "CHECKBOX",
        "SELECT",
        "IMAGE_CAROUSEL",
        "IMAGE_UPLOAD",
        "UPLOAD",
        "CASCADER",
        "IMAGE_SELECT",
        "INPUT",
        "DATE",
        "RATE",
        "SLIDER",
        "NUMBER",
        "FUNCTION_CALC",
        "PROVINCE_CITY"
      ]
    }
  },
  computed: {
    config() {
      return this.currentItem.config
    },
    labelWidth() {
      return this.config.labelWidth ? `${this.config.labelWidth}px` : null
    },
    getExamAnswer() {
      if (['RADIO', 'CHECKBOX', 'IMG_SELECT', 'SELECT'].includes(this.currentItem.typeId)) {
        return getCheckedLabel(this.currentItem.examConfig.answer, this.currentItem.config.options, this.currentItem, {}).join(',')
      } else {
        return this.currentItem.examConfig.answer
      }
    }
  },
  methods: {
    handleDefaultValue(val) {
      this.$set(this.currentItem.config, "defaultValue", val)
    },
    handleChangeLabel(val) {
      this.$set(this.currentItem.config, "label", val)
      this.$emit('change', this.currentItem)
    },
    getComponentName(item) {
      return item.config.tag
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-component::after {
  display: unset;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.0);
}

::v-deep .el-form-item__label {
  width: 100% !important;
}

.el-form-item__label > div {
  border-radius: 3px;
  display: inline-block;
  width: 95%;
  border: 1px dashed transparent;
}

.el-form-item__label > div:hover {
  border: 1px dashed #d8d8d8;
}

::v-deep .el-form-item__label:before {
  vertical-align: top;
  margin-top: 0.15em;
  display: inline-block;
}

.text-after {
  color: #1890ff;
  margin-left: 10px;
  display: block;
}
.seqNo{
  display: inline-block;
  margin-right:5px;
}
</style>

